<template>
	<view class="content">
		<!--顶部导航-->
		<view class="content_1" :style="{'height':titleBarHeight + 'px'}">
			<view class="title_1" :style="{'margin-top':top + 'px'}">
				<view class="title_1_icon" @click="back">
					<image class="title_1_icon" src="../../../static/mine/finish/back.png" mode="aspectFit"></image>
				</view>
				<view class="title_1_text">紫菜可莉订单~</view>
			</view>
		</view>
		<!--占位-->
		<view :style="{height:spaceHeight +'px'}"></view>
		<!--搜索样式-->
		<view class="content_2">
			<!-- <view class="search_view">
				<image class="search_icon" src="../../../static/order/search/search.png" mode="aspectFit"></image>
				<input class="search_text" placeholder="搜索我的订单" placeholder-style="font-size:24upx;color:#8d8d8d"></se-input>
			</view> -->
		</view>
		<!--订单状态-->
		<view class="content_3">
			<scroll-view scroll-x style="white-space: nowrap;">
				<view :class="[state == '0' ? 'state_box_active' : 'state_box']" @click="changeState(0)">
					<text>全部</text>
					<view class="line_active" v-if="state == '0'"></view>
				</view>
				<view :class="[state == '1' ? 'state_box_active' : 'state_box']" @click="changeState(1)">
					<text>未支付</text>
					<view class="line_active" v-if="state == '1'"></view>
				</view>
				<view :class="[state == '2' ? 'state_box_active' : 'state_box']" @click="changeState(2)">
					<text>已支付</text>
					<view class="line_active" v-if="state == '2'"></view>
				</view>
				<view :class="[state == '3' ? 'state_box_active' : 'state_box']" @click="changeState(3)">
					<text>未收货</text>
					<view class="line_active" v-if="state == '3'"></view>
				</view>
				<view :class="[state == '4' ? 'state_box_active' : 'state_box']" @click="changeState(4)">
					<text>待退款</text>
					<view class="line_active" v-if="state == '4'"></view>
				</view>
				<view :class="[state == '5' ? 'state_box_active' : 'state_box']" @click="changeState(5)">
					<text>退款成功</text>
					<view class="line_active" v-if="state == '5'"></view>
				</view>
			</scroll-view>
		</view>
		<!--订单详细-->
		<view class="content_4">
			<block v-for="(shopOrder, index_shopOrder) in orderList" :key="index_shopOrder">
				<!--显示数组中全部的对象-->
				<view class="order_box" v-if="state == '0'">
					<view class="shop">
						<view class="shop_name">{{shopOrder.shop_name}}</view>
						<view class="shop_state">{{shopOrder.status_text.msg}}</view>
					</view>
					<view class="line_4"></view>
					<view class="shop_detail_view">
						<view class="shop_detail">
							<image class="shop_detail_img" :src="shopOrder.logo_image"></image>
							<view class="shop_detail_info">
								<view class="shop_information">下单时间：{{shopOrder.create_time}}</view>
								<view class="shop_information">总价：￥{{shopOrder.order_money}}</view>
							</view>
						</view>
						<view class="shop_button">再来一单</view>
					</view>
				</view>
				<!--全部对象end-->

				<!--v-if判断shopstate && state来显示数组中相应的对象-->
				<view class="order_box" v-if="shopOrder.status_text.msg == '未支付' && state == '1'">
					<view class="shop">
						<view class="shop_name">{{shopOrder.shop_name}}</view>
						<view class="shop_state">{{shopOrder.status_text.msg}}</view>
					</view>
					<view class="line_4"></view>
					<view class="shop_detail_view">
						<view class="shop_detail">
							<image class="shop_detail_img" :src="shopOrder.logo_image"></image>
							<view class="shop_detail_info">
								<view class="shop_information">下单时间：{{shopOrder.create_time}}</view>
								<view class="shop_information">总价：￥{{shopOrder.order_money}}</view>
							</view>
						</view>
						<view class="shop_button">再来一单</view>
					</view>
				</view>
				<!--判断end-->

				<!--v-if判断 同上-->
				<view class="order_box" v-if="shopOrder.status_text.msg == '已支付' && state == '2'">
					<view class="shop">
						<view class="shop_name">{{shopOrder.shop_name}}</view>
						<view class="shop_state">{{shopOrder.status_text.msg}}</view>
					</view>
					<view class="line_4"></view>
					<view class="shop_detail_view">
						<view class="shop_detail">
							<image class="shop_detail_img" :src="shopOrder.logo_image"></image>
							<view class="shop_detail_info">
								<view class="shop_information">下单时间：{{shopOrder.create_time}}</view>
								<view class="shop_information">总价：￥{{shopOrder.order_money}}</view>
							</view>
						</view>
						<view class="shop_button">再来一单</view>
					</view>
				</view>
				<!--判断end-->

				<!--v-if判断 同上-->
				<view class="order_box" v-if="shopOrder.status_text.msg == '未收货' && state == '3'">
					<view class="shop">
						<view class="shop_name">{{shopOrder.shop_name}}</view>
						<view class="shop_state">{{shopOrder.status_text.msg}}</view>
					</view>
					<view class="line_4"></view>
					<view class="shop_detail_view">
						<view class="shop_detail">
							<image class="shop_detail_img" :src="shopOrder.logo_image"></image>
							<view class="shop_detail_info">
								<view class="shop_information">下单时间：{{shopOrder.create_time}}</view>
								<view class="shop_information">总价：￥{{shopOrder.order_money}}</view>
							</view>
						</view>
						<view class="shop_button">再来一单</view>
					</view>
				</view>
				<!--判断end-->

				<!--v-if判断 同上-->
				<view class="order_box" v-if="shopOrder.status_text.msg == '待退款' && state == '4'">
					<view class="shop">
						<view class="shop_name">{{shopOrder.shop_name}}</view>
						<view class="shop_state">{{shopOrder.status_text.msg}}</view>
					</view>
					<view class="line_4"></view>
					<view class="shop_detail_view">
						<view class="shop_detail">
							<image class="shop_detail_img" :src="shopOrder.logo_image"></image>
							<view class="shop_detail_info">
								<view class="shop_information">下单时间：{{shopOrder.create_time}}</view>
								<view class="shop_information">总价：￥{{shopOrder.order_money}}</view>
							</view>
						</view>
						<view class="shop_button">再来一单</view>
					</view>
				</view>
				<!--判断end-->

				<!--v-if判断 同上-->
				<view class="order_box" v-if="shopOrder.status_text.msg == '退款成功' && state == '5'">
					<view class="shop">
						<view class="shop_name">{{shopOrder.shop_name}}</view>
						<view class="shop_state">{{shopOrder.status_text.msg}}</view>
					</view>
					<view class="line_4"></view>
					<view class="shop_detail_view">
						<view class="shop_detail">
							<image class="shop_detail_img" :src="shopOrder.logo_image"></image>
							<view class="shop_detail_info">
								<view class="shop_information">下单时间：{{shopOrder.create_time}}</view>
								<view class="shop_information">总价：￥{{shopOrder.order_money}}</view>
							</view>
						</view>
						<view class="shop_button">再来一单</view>
					</view>
				</view>
				<!--判断end-->

			</block>
		</view>
	</view>
</template>

<script>
	//引入request.js
	import {
		Request
	} from '../../../utils/request.js'
	var app = getApp()

	export default {
		data() {
			return {
				titleBarHeight: '',
				spaceHeight: '',
				top: '',
				shoptypeHeight: '',
				state: '0', //订单状态
				leftView: '10', //自定义滚动条位置
				orderList: []
			}
		},
		onLoad() {
			//获取系统信息
			uni.getSystemInfo({
				success: (res) => {
					this.top = res.statusBarHeight - uni.upx2px(30)
					this.titleBarHeight = res.statusBarHeight + 22
					this.spaceHeight = res.statusBarHeight + 38
					this.shoptypeHeight = res.windowHeight - uni.upx2px(590)
				},
			})
			//获取全部订单
			new Request('orderinfo/orderlist/Get_Order_List/GetUserOrderList').request(
				() => {
					return 'POST'
				},
				() => {
					return {
						openid: app.globalData.openid
					}
				},
				(res) => {
					if (res.data.code == '0') {
						new Request().showToast('快带可莉去购物吧~', 'none', () => {})
					} else if (res.data.code == '1') {
						this.orderList = res.data.data
					}
				}
			)
		},
		methods: {
			//传id值，点击切换状态
			changeState: function(id) {
				this.state = id
			},
			//返回
			back: function() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F0F0F0;
	}

	/*
		顶部导航样式
	*/
	.content_1 {
		width: 750upx;
		background-image: linear-gradient(#E03507, #D92200); //颜色渐变效果(上下)
		text-align: center;
		padding-top: 48upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: fixed;
		z-index: 999;
	}

	.title_1 {
		height: 45upx;
		color: #FFFFFF;
		font-size: 32upx;
		position: absolute;
		left: 25upx;
		top: 50upx;
		display: flex;
		align-items: center;
	}

	.title_1_icon {
		width: 20upx;
		height: 35upx;
		margin-right: 25upx;
	}

	.title_1_text {
		height: 45upx;
		font-size: 32upx;
		line-height: 45upx;
		color: #FFFFFF;
	}

	/*
		搜索框样式
	*/
	.content_2 {
		height: 20upx;
		background-image: linear-gradient(#D92200, #C61500); //颜色渐变效果(上下)
		padding-top: 20upx;
	}

	.search_view {
		height: 65upx;
		margin: 0 25upx;
		margin-top: 10upx;
		background-color: #FFFFFF;
		border-radius: 65upx;
		padding-left: 30upx;
		display: flex;
		align-items: center;
	}

	.search_icon {
		height: 30upx;
		width: 30upx;
		margin-right: 20upx;
	}

	.search_text {
		height: 34upx;
		width: 500upx;
	}

	/*
		订单状态样式
	*/
	.content_3 {
		height: 80upx;
		background-color: #FFFFFF;
		display: flex;
		position: relative;
	}

	.state_box {
		height: 80upx;
		font-size: 28upx;
		color: #595959;
		line-height: 80upx;
		text-align: center;
		font-weight: 550;
		padding: 0 25upx;
		margin-right: 10upx;
		display: inline-block;
		position: relative;
	}

	.state_box_active {
		height: 80upx;
		font-size: 32upx;
		color: #2D2D2D;
		line-height: 80upx;
		text-align: center;
		font-weight: 550;
		padding: 0 25upx;
		margin-right: 10upx;
		display: inline-block;
		position: relative;
	}

	.line_active {
		width: 20upx;
		height: 80upx;
		position: absolute;
		left: 40%;
		top: 0;
		box-sizing: border-box;
		border-bottom: 8upx solid #DC2700;
	}

	/*
		订单详细样式
   */
	.content_4 {
		height: auto;
		display: flex;
		flex-direction: column;
		margin: 0 25upx;
		margin-top: 25upx;
		padding-bottom: 200upx;
	}

	.order_box {
		height: 280upx;
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 30upx;
		display: flex;
		flex-direction: column;
		margin-bottom: 20upx;
	}

	.shop {
		height: 80upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0upx 30upx;
	}

	.shop_name {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #2D2D2D;
		font-weight: 550;
	}

	.shop_state {
		height: 34upx;
		line-height: 34upx;
		font-size: 24upx;
		color: #595959;
		font-weight: 550;
	}

	.line_4 {
		height: 2upx;
		background-color: #F3F3F3;
	}

	.shop_detail_view {
		height: 200upx;
		display: flex;
		flex-direction: column;
		padding: 0upx 30upx;
		position: relative;
	}

	.shop_detail {
		height: 120upx;
		display: flex;
		align-items: center;
	}

	.shop_detail_img {
		height: 96upx;
		width: 96upx;
		border-radius: 12upx;
		background-color: #FF461E;
		margin-right: 20upx;
	}

	.shop_detail_info {
		height: 72upx;
		display: flex;
		flex-direction: column;
		padding: 12upx 0upx;
		justify-content: space-between;
	}

	.shop_information {
		height: 34upx;
		font-size: 24upx;
		line-height: 34upx;
		color: #595959;
	}

	.shop_button {
		height: 60upx;
		width: 150upx;
		border-radius: 20upx;
		border: 2upx solid #E6E6E6;
		line-height: 60upx;
		font-size: 24upx;
		text-align: center;
		color: #595959;
		position: absolute;
		right: 30upx;
		bottom: 20upx;
	}
</style>
